import {_decorator, Component, Node, CCFloat, CCBoolean, Sprite, SpriteFrame} from 'cc';

const {ccclass, property} = _decorator;

@ccclass('CustomAnimation')
export class CustomAnimation extends Component {
    /**
     * 播放速度，也就是切换图片的速度
     */
    @property(CCFloat)
    speed: number = 0.1;
    /**
     * 图片集合
     */
    @property([SpriteFrame])
    spriteFrames: SpriteFrame[] = [];
    /**
     * 是否播放动画
     */
    @property(CCBoolean)
    played: boolean = true;

    /**
     * 图片索引
     */
    private index: number = 0;
    /**
     * 计时器
     */
    private timer: number = 0;

    start() {
    }

    update(deltaTime: number) {
        // 当播放动画时
        if (this.played) {
            // deltaTime 大约是 0.016 秒，也就是 16 毫秒
            // 不断累计时间
            this.timer += deltaTime;
            // 当累计的时间超过 0.1 秒时，切换图片
            if (this.timer > this.speed) {
                // 重置计时器
                this.timer = 0;
                // 重置索引
                if (this.index >= this.spriteFrames.length) {
                    this.index = 0;
                }
                // 切换图片
                this.node.getComponent(Sprite).spriteFrame = this.spriteFrames[this.index++];
            }
        }
    }

    /**
     * 开始播放动画
     */
    play() {
        this.played = true;
    }

    /**
     * 停止播放动画
     */
    stop() {
        this.played = false;
    }
}

